<template>
  <div>
    <div class="table">
      <!--查询表单-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input
            size="mini"
            v-model="videoPromotionId"
            placeholder="视频ID"
          />
        </el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="getVideoInfo()"
          >查询</el-button
        >
        <el-button size="small" type="default" @click="resetData()"
          >清空</el-button
        >
      </el-form>
      <el-table
        :data="videoListData"
        style="width: 100%"
        stripe
        max-height="680"
        v-loading="Tloading"
      >
        <el-table-column
          label="视频ID"
          width="100px"
          prop="videoId"
          sortable
          fixed
        >
        </el-table-column>
        <el-table-column label="时间" prop="updatedTime" sortable fixed>
        </el-table-column>
        <el-table-column label="标题" prop="videoTitle"> </el-table-column>
        <el-table-column label="标签">
          <template slot-scope="scope">
            <div v-if="scope.row.videoTags != null">
              <div
                v-for="(item, index) in JSON.parse(scope.row.videoTags)"
                :key="index"
              >
                <el-tag>{{ item }}</el-tag>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="视频介绍" prop="videoIntroduction">
        </el-table-column>
        <el-table-column label="封面" prop="videoCover">
          <template slot-scope="scope">
            <div class="coverImg">
              <el-image
                style="width: 100%; height: 100%"
                :src="'http://xgh.com:4000/' + scope.row.videoCover"
                fit="contain"
              >
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="播放" prop="videoUrl" width="65px">
          <template slot-scope="scope">
            <el-button circle @click="playEdit(scope.$index, scope.row)"
              ><i class="el-icon-caret-right"></i
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column align="right" width="142px">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.flag == false || isFlag == false"
              size="mini"
              type="primary"
              @click="agreePromotion(scope.row.videoId, scope.row.flag)"
              >推广</el-button
            >
            <el-button
              v-if="scope.row.flag != false && isFlag != false"
              hidden="true"
              size="mini"
              type="danger"
              @click="cancelPromotion(scope.row.videoId, scope.row.flag)"
              >取消推广</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <!-- 视频播放弹窗 -->
      <el-dialog
        :title="rowTitle"
        :visible.sync="dialogVideoVisible"
        v-if="dialogVideoVisible"
        width="40%"
      >
        <video
          ref="video"
          class="video"
          width="100%"
          height="100%"
          playbackRate="3"
          controls
          autoplay
        >
          <source :src="rowUrl" type="video/mp4" />
        </video>
        <div slot="footer" class="dialog-footer">
          <el-button @click="playRate">倍速</el-button>
          <el-button type="primary" @click="suc">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import videoApi from "@/api/video";
export default {
  data() {
    return {
      playFlag: false,
      isFlag: false,
      videoPromotionId: "",
      check: true,
      Tloading: false,
      // loading: false,
      dialogVideoVisible: false,
      rowTitle: "",
      rowUrl: "",
      rowIndex: "",
      videoListData: [],
    };
  },
  created() {
    //获取时所有视频都已发布
    this.videoPromotionId = "";
    this.GetAlreadyVideoPromotion();
  },
  watch: {
    videoPromotionId: function (val) {
      this.videoPromotionId = val.replace(/\D/g, "");
    },
  },
  methods: {
    
    //清空
    resetData() {
      this.videoPromotionId = "";
      this.GetAlreadyVideoPromotion();
    },
    //获取已发布的视频
    GetAlreadyVideoPromotion() {
      videoApi.toGetAlreadyVideoPromotion().then((response) => {
        // console.log(response.data);
        this.videoListData = response.data.videoList;
        this.videoListData.forEach((element) => {
          element["flag"] = true;
        });
        this.isFlag = true;
      });
    },
    //判断是否推广
    judgeVideoPromotion() {
      videoApi.toJudgeVideoPromotion(this.videoPromotionId).then((response) => {
        if (response) {
          // console.log(response.data.result);
          this.isFlag = response.data.result;
          //   this.videoListData.flag = response.data.result;
        }
      });
    },
    //取消推广
    cancelPromotion(id, flag) {
      if (this.videoPromotionId == "") {
        videoApi.toCancelVideoPromotion(id).then((response) => {
          if (response) {
            flag = false;
            // this.isFlag= false
            for (let index = 0; index < this.videoListData.length; index++) {
              if (this.videoListData[index].videoId == id) {
                this.videoListData.splice(index, 1);
              }
            }
            this.$message({
              message: "取消成功",
              type: "success",
            });
          }
        });
        console.log("hhhhhh");
        this.GetAlreadyVideoPromotion();
      } else {
        this.videoPromotionId = id;
        videoApi
          .toCancelVideoPromotion(this.videoPromotionId)
          .then((response) => {
            if (response) {
              flag = false;
              this.isFlag = false;
              this.$message({
                message: "取消成功",
                type: "success",
              });
            }
          });
      }
    },
    //推广
    agreePromotion(id, flag) {
      this.videoPromotionId = id;
      videoApi.toSetVideoPromotion(this.videoPromotionId).then((response) => {
        if (response) {
          flag = true;
          this.isFlag = true;
          this.$message({
            message: "推广成功",
            type: "success",
          });
        }
      });
    },
    //打开视频播放
    playEdit(index, row) {
      (this.rowTitle = row.videoTitle),
        // console.log(row.videoUrl);
        (this.rowUrl = "http://xgh.com:4000/" + row.videoUrl);

      this.dialogVideoVisible = true;
    },

    //倍速播放
    playRate() {
      if (this.playFlag!=true) {
        this.playFlag=true
        console.log(this.playFlag);
        let video = document.querySelector(".video");
        video.playbackRate = 3;
      }else{
        this.playFlag=false
         console.log(this.playFlag);
        let video = document.querySelector(".video");
        video.playbackRate = 1;
      }

      // console.log("测试获取当前视频倍数");
    },

    //视频弹窗确定
    suc() {
      this.rowUrl = "";
      this.$refs.video.currentTime = 0;
      this.dialogVideoVisible = false;
      this.check = false;
    },

    //通过视频Id获取视频
    getVideoInfo() {
      if (this.videoPromotionId != "") {
        this.videoPromotionId = this.videoPromotionId.replace(" ", "");
        // console.log(this.videoPromotionId);
        videoApi.toGetVideoInfo(this.videoPromotionId).then((response) => {
          //   console.log(response.data.video);
          //判断搜索的视频是否已存在
          this.judgeVideoPromotion(this.videoPromotionId);
          this.videoListData = response.data.video;
          //   console.log(this.videoListData[0].videoTags);
          //   this.videoListData.videoTags = JSON.parse(
          //     this.videoListData.videoTags
          //   );
          //   this.videoListData.videoTags=this.videoListData.videoTags.split(',')
          //   if (this.videoListData.length > 0) {
          //     this.videoListData.videoTags = JSON.parse(
          //       this.videoListData.videoTags
          //     );
          //   }
          if (this.videoListData.length < 1) {
            this.$message("找不到您想要的视频,请核实后再输入");
          }
          // console.log(this.videoListData);
        });
      } else {
        // this.$message("请输入视频ID进行查询哦"); 
        this.GetAlreadyVideoPromotion();
      }
    },
  },
};
</script>

<style scoped>
.table {
  width: 76vw;
  margin-top: 3vw;
}

.block {
  align-self: flex-end;
}

.coverImg {
  width: 7vw;
  height: 4vw;
}

.radio {
  margin-left: 8px;
  font-size: 25px;
}

.dialog-p {
  margin: 18px 0 8px 8px;
  font-size: 20px;
}

#reson {
  resize: none;
  font-size: 20px;
  outline-color: cornflowerblue;
  width: 100%;
}
</style>
